<template>
  <!--  v-if="comment.user"-->

  <div class="comment-item-comp w-full flex justify-between">
    <div class="user-avatar pr-4">
      <el-avatar
        :src="comment.user && comment.user.avatar"
        :size="60"
      ></el-avatar>
    </div>

    <div class="comment-container flex-1">
      <div
        class="prose comment-content"
        v-html="renderContent(comment.content)"
      ></div>

      <div class="comment-opers w-full inline-flex justify-end">
        <!--        <el-button type="text" class="mx-2">-->
        <!--          <i class="el-icon-d-caret text-base text-primary-500"></i>-->
        <!--        </el-button>-->

        <el-button v-popover:reply-comment type="text" class="mx-2">
          <i class="el-icon-chat-square text-base text-primary-500"></i>
        </el-button>

        <el-popconfirm
          v-if="user.id === comment.user_id"
          title="确认删除此条评论？"
          class="inline-flex items-center cursor-pointer mx-2"
          @onConfirm="handleDeleteComment"
        >
          <i
            slot="reference"
            class="el-icon-close text-base text-primary-500"
          ></i>
        </el-popconfirm>
      </div>

      <NcCommentItem2
        v-for="(id, index) in comment.children"
        :key="index"
        :comment-id="id"
        class="mb-2"
      >
      </NcCommentItem2>
    </div>

    <el-popover
      ref="reply-comment"
      v-model="showReplyPopover"
      :width="400"
      trigger="click"
      placement="bottom-end"
      class="z-20"
    >
      <div class="reply-content mb-4">
        <el-input
          v-model="inputContent"
          type="textarea"
          :autosize="{ minRows: 2 }"
        >
        </el-input>
      </div>

      <div class="reply-opers flex justify-end items-center">
        <div class="reply-oper oper-cancel">
          <el-button
            size="small"
            :style="{ border: 'none' }"
            @click="showReplyPopover = false"
          >
            取消
          </el-button>
        </div>

        <div class="reply-oper oper-confirm">
          <el-button type="success" size="small" @click="onSubmitReply">
            确认
          </el-button>
        </div>
      </div>
    </el-popover>

    <NcLoginDialog ref="login" :modal="false"></NcLoginDialog>
    <NcEditDialog ref="edit"></NcEditDialog>
  </div>
</template>

<script>
import { ElButton, ElPopover } from 'element-ui'
import { mapState } from 'vuex'
import NcLoginDialog from '@/components/login-comp/NcLoginDialog'
import NcEditDialog from '@/components/login-comp/NcEditDialog'

export default {
  name: 'NcCommentItem2',
  components: { NcEditDialog, NcLoginDialog },
  props: {
    commentId: String,
  },

  async fetch() {
    await this.fetchData()
  },

  data() {
    return {
      inputContent: '',
      comment: {},
      showReplyPopover: false,
    }
  },

  computed: {
    ...mapState(['user']),
  },

  methods: {
    async fetchData() {
      const comment = await this.$getComments({
        id: this.commentId,
        with_user: true,
        with_children: true,
      })
      this.$set(this, 'comment', comment)
      // console.log({ id: this.commentId, content: this.comment.content })
    },

    renderContent(content) {
      if (content) {
        const md = require('marked')
        return md(content)
      }
    },

    async onSubmitReply() {
      if (!this.inputContent) {
        return this.$message.error('你好像啥也没输入呢！')
      }

      if (!this.user.hasLogined) {
        this.showReplyPopover = false
        this.$refs.login.handleOpen()
        return this.$message.error('登录后才可以发表评论哦~')
      }

      if (!this.user.avatar) {
        this.$refs.edit.handleOpen()
        return this.$message.error('有了头像后才可以发表评论哦~')
      }

      await this.$http.post(this.$api.apps.post.comment.add.path, {
        user_id: this.user.id,
        content: this.inputContent,
        to_id: this.commentId,
        is_document: false,
      })

      // await this.$nuxt.refresh()
      await this.$parent.fetchData()
      await this.fetchData()
      this.$message.success('回复提交成功~')
      this.inputContent = ''
      this.showReplyPopover = false
    },

    async handleDeleteComment() {
      await this.$http.$get(this.$api.apps.post.comment.delete.path, {
        params: { comment_id: this.commentId },
      })
      // await this.$nuxt.refresh()
      await this.$parent.fetchData()
      await this.fetchData()
      this.$message.success('删除成功')
    },
  },
}
</script>

<style scoped lang="stylus">

.comment-item-comp::before
  content ''
  width 5px
  background-color #cccccc
  margin-right 10px
  margin-bottom 10px
</style>
